<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="box">
			<div class="demo">

			</div>

			<div class="item">

			</div>
			<span>aaaa</span>
		</div>
	</body>

</html>

<style type="text/css">
	.box {
		width: 800px;
		height: 400px;
		background: gray;
		text-align: center;
	}
	
	.box:after {
		content: '';
		display: inline-block;
		height: 100%;
		width: 10px;
		background: orange;
		vertical-align: middle;
	}
	
	.item {
		width: 150px;
		height: 150px;
		display: inline-block;
		vertical-align: middle;
		background: green;
	}
	span {
		vertical-align: middle;
	}
	/* 使.item元素垂直居中,水平居中 */
</style>